Lists and grids

 Summary:
  • Textual list items in one row.
  • Informative icons can be used for some or all items.
    • Icons are placed to the left of the text.
  • Possible Radio buttons and check boxes are placed to the right of the text.
  • Mixing Radio button, Check box, and plain list items is not possible.
  • The icon positions and selection indicators are mirrored for right-to-left languages.
 Java

Related design guidelines

Lists contain one row textual items, with optional additional icons and/or interactive buttons. In general, informative icons should be displayed to the left of the text and selection indicators (Check box, Radio button) on the right. The icon positions and selection indicators are mirrored for right-to-left languages.

With touch down a highlight is shown to the list item. With touch release the highlight disappears, and the action is triggered. With Check boxes, when the user taps on the box, it changes its state to On/Off. With Radio buttons tapping the indicator selects the item, and unselects the previous selection.

You can only use one list item type (plain, Radio button, or Check box) for each list.

Plain list  
Figure 1. Plain list showing highlight on item 6
  • Touch down shows highlight.
  • Touch release removes the highlight.
  • Action is triggered with touch release.

List with icons  
Figure 2. List with icons
  • Optional icons appear on the left.
  • The icon canvas is 28 x 28 px, bounding box 38 x 38 px.
  • Icons are mirrored for right-to-left languages.

List with Radio buttons  
Figure 3. List with Radio buttons
  • Radio buttons appear on the right.
  • One item is always selected.
  • Tapping the button selects the item, and unselects the previous selection.
  • Radio buttons are mirrored for right-to-left languages.

List with Check boxes  
Figure 4. List with Check boxes
  • Check boxes appear on the right.
  • One or more items can be selected.
  • Tapping on the box changes its state to On/Off (i.e., selected/unselected).
  • Check boxes are mirrored for right-to-left languages.

Grids

A list can be presented in the form of a grid as well; it's just a more graphical way of organising the information. There is no component or API available for creating a grid layout. Examples of grid layout can be found from the App launcher and the Gallery. A grid layout can be achieved by using Canvas.

Figure 5. Different grid layouts

© Nokia 2012.